<template>
	<view class="bindingcode-page">
		<view class="hintcode">短信验证码已经发送到<br>123****5555</view>
		
		<view class="bindingcode-item">
			<input type="text" placeholder="请输入验证码" class="bindingcode-input"/>
			<text :disabled="isCounting" @click="startCountdown" class="code">{{ countdownText }}</text>
			<button type="default" class="bindingcode-btn">提交</button>
			
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const verificationCode = ref('');
const isCounting = ref(false);
const secondsRemaining = ref(60); // 倒计时时间，单位为秒
const countdownText = ref('获取验证码');

const startCountdown = () => {
  if (isCounting.value) return;

  // 模拟发送验证码请求
  console.log('Sending verification code...');
  
  // 开始倒计时
  isCounting.value = true;
  let timer = setInterval(() => {
    secondsRemaining.value -= 1;
    countdownText.value = `${secondsRemaining.value} s 后可重新获取`;

    if (secondsRemaining.value <= 0) {
      clearInterval(timer);
      resetCountdown();
    }
  }, 1000);
};

const resetCountdown = () => {
  isCounting.value = false;
  secondsRemaining.value = 60;
  countdownText.value = '再次获取';
};	
</script>

<style>
.bindingcode-page{
	padding: 40rpx 60rpx;
}
	
.hintcode{
	margin:50rpx;
	font-size: 40rpx;
	text-align: center;
}

.bindingcode-item{
	position:relative;
	padding: 100rpx 20rpx;
}
.bindingcode-input{
	padding:20rpx 0;
	font-size: 28rpx;
	border-bottom: 4rpx solid #666ee8;
}
	
.bindingcode-btn{
	margin-top:60rpx;
	color:#fff !important;
	background-color: #666ee8 !important;
	border-radius:100rpx;
}	  
  
.code{
	position:absolute;
	top:120rpx;
	right:30rpx;
	font-size:24rpx;
	color:#666ee8;
}


</style>
